<template>
  <div class="chart-container">
    <div class="count">
      <div class="count-title">券数据统计</div>
      <div class="count-item" >
        <div class="count-block" v-for="(item,index) in countData" :key="index">
          <div class="count-block-icon">
            <el-image :src="item.url" />
          </div >
          <div class="count-block-info">
            <span>{{item.name}}</span>
            <count-to :start-val="0" :end-val="item.num" :duration="3000" class="card-panel-num" />
          </div>
        </div>
      </div>
    </div>

    <div id="echart" style="background:#fff;padding:16px;margin:32px 0; width:1000px;height:550px">
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import chart from '@/components/Charts/Keyboard'
import { couponReceive, couponReceiveStatis } from '@/api/coupon'
// 全部引入
var echarts = require('echarts')
export default {
  name: 'CouponEchart',
  components: { chart, CountTo },
  data() {
    return {
      id: this.$route.query.id,
      countData: [],
      statistics: {// 券统计
        receiveCount: null, // 领取数
        useCount: null, // 使用数
        useRate: null, // 使用比例
        allCount: null, // 优惠券总数
        receiveRate: null // 领取百分比
      },
      leadTime: [], // 时间
      receive: [],
      usecount: [],
      options: {}
    }
  },
  computed: {

  },
  watch: {
    options: {
      handler(options) {
        this.chart.setOption(options)
      },
      deep: true
    }
  },
  created() {
    this.getCouponInfo()
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      this.chart = echarts.init(document.getElementById('echart'))
      this.setOptions()
    },
    setOptions() {
      this.chart.setOption({
      })
    },
    getCouponInfo() {
      couponReceive({
        couponId: this.id,
        busId: this.$store.getters.businessId
      }).then(res => {
        const data = res.data
        this.countData = [
          {
            name: '券发放数量',
            url: require('@/assets/images/组 3450@3x.png'),
            num: data.allCount
          },
          {
            name: '券领取数量',
            url: require('@/assets/images/组 3448@3x.png'),
            num: data.receiveCount
          },
          {
            name: '券使用数量',
            url: require('@/assets/images/组 3449@3x.png'),
            num: data.useCount
          },
          {
            name: '券领取率',
            url: require('@/assets/images/组 3447@3x.png'),
            num: data.receiveRate
          },
          {
            name: '券使用率',
            url: require('@/assets/images/组 3451@3x.png'),
            num: data.useRate
          }
        ]
      })

      couponReceiveStatis({
        couponId: this.id,
        busId: this.$store.getters.businessId
      }).then(res => {
        const { leadTime, receive, usecount } = res.data
        this.chart.setOption({
          backgroundColor: '#fff',

          legend: {
            y: 'bottom',
            // 强制设置图形为圆。
            icon: 'roundRect',
            // 设置文本颜色
            textStyle: {
              color: 'rgb(151, 151, 151)',
              fontSize: 12
            }

          },
          title: {
          // text: ''
          },
          tooltip: {},
          xAxis: {
            axisLine: {
              show: false // 隐藏坐标轴线
            },
            type: 'category',
            splitLine: { show: false },
            symbol: 'none', // 这句就是去掉点的
            data: leadTime,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0
              // rotate: 40
            }
          },

          yAxis: {
            axisLine: {
              show: false
            }
          // data: this.receive
          },
          series: [
            {
              name: '领取数量',
              type: 'line',
              data: receive,
              color: ['#396aff'],
              lineStyle: {
                width: 4
              }
            },
            {
              name: '使用数量',
              type: 'line',
              color: ['#ffbb38'],
              data: usecount,
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 4
                  }
                }
              }
            }
          ]
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.chart-container{
  padding:20px 50px;
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
  background: rgba(245, 247, 251, 1);
  overflow: hidden;
  overflow-y: scroll;
  .count{
    padding:  20px;
    background: #fff;
    box-sizing: border-box;
    .count-title{
      margin: 0 0 30px 30px;
      font-size: 16px;
      font-weight: 600;
    }
    .count-item{
      margin-top: 20px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .count-block{
        padding: 0 20px;
        width: 200px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        box-sizing: border-box;
        .count-block-icon{
          width: 50px;
          height: 50px;
          >img{
            width:100%;
            height: 100%;
          }
        }
        .count-block-info{
          display: flex;
          flex-flow: column;
          align-items: center;
          justify-content: space-between;
          >span{
            margin-bottom: 10px;
            color: rgb(151, 151, 151);
          }
          .card-panel-num{
            font-size: 20px;
            font-weight: 600;
            color: rgb(22, 22, 22);

          }
        }
      }
    }
  }
}
</style>
